import React from 'react';
import { Form, Input, Icon, Button, message, Tooltip, Col } from 'antd';
function hasErrors(fieldsError) {
    return Object.keys(fieldsError).some(field => fieldsError[field]);
}

class Company extends React.Component {
    constructor(props) {
        super(props);
        this.state = {}
    }
    componentDidMount() {
        // 默认注册按钮禁用
        // eslint-disable-next-line
        this.props.form.validateFields();
    }
    handleSubmit = (e) => {
        e.preventDefault();
        // eslint-disable-next-line
        this.props.form.validateFields((err, values) => {
            if (err) {
                message.error(`注册检验失败，请重试`);
                return;
            }
            // eslint-disable-next-line
            this.props.register(values);
        });
    }

    render() {
        // eslint-disable-next-line
        const { getFieldDecorator, getFieldsError, getFieldError, isFieldTouched } = this.props.form;
        return (
            <Form onSubmit={this.handleSubmit} autoComplete="off">
                <Form.Item
                    validateStatus={isFieldTouched('account') && getFieldError('account') ? 'error' : ''}
                    help={isFieldTouched('account') && getFieldError('account') || ''}
                >
                    {
                        getFieldDecorator('account', {
                            rules: [
                                { required: true, whitespace: true, message: '请输入账户!' },
                                {
                                    validator: (rule, value, callback) => {
                                        // eslint-disable-next-line
                                        if (this.props.formCheckRules.userNameReg.test(value)) {
                                            callback();
                                            return;
                                        }
                                        callback(
                                            `
                                            大小写字母开头，包含字母、数字、下划线，共5到15位
                                            或者
                                            汉字开头，包含字母、数字、下划线，共3到8位
                                            `
                                        );
                                    },
                                }
                            ],
                        })(
                            <Input
                                placeholder="企业账户：example123-_(3-15位)/中文(3-8位)"
                                autoComplete="off"
                                size="large"
                                prefix={<Icon type="user" />}
                            />
                        )
                    }
                </Form.Item>
                <Form.Item
                    validateStatus={isFieldTouched('email') && getFieldError('email') ? 'error' : ''}
                    help={isFieldTouched('email') && getFieldError('email') || ''}
                >
                    {
                        getFieldDecorator('email', {
                            rules: [
                                { required: true, whitespace: true, message: '请输入邮箱!' },
                                {
                                    validator: (rule, value, callback) => {
                                        // eslint-disable-next-line
                                        if (this.props.formCheckRules.emailReg.test(value)) {
                                            callback();
                                            return;
                                        }
                                        callback('邮箱格式不合法');
                                    },
                                }
                            ],
                        })(
                            <Input
                                placeholder="企业邮箱：请输入正确的邮箱"
                                autoComplete="off"
                                size="large"
                                prefix={<Icon type="schedule" />}
                            />
                        )
                    }
                </Form.Item>
                <Form.Item
                    validateStatus={isFieldTouched('password') && getFieldError('password') ? 'error' : ''}
                    help={isFieldTouched('password') && getFieldError('password') || ''}
                >
                    {
                        getFieldDecorator('password', {
                            rules: [
                                { required: true, whitespace: true, message: '请输入密码!' },
                                {
                                    validator: (rule, value, callback) => {
                                        // eslint-disable-next-line
                                        if (this.props.formCheckRules.passwordReg.test(value)) {
                                            callback();
                                            return;
                                        }
                                        callback(
                                            `字母、数字、下划线 或 特殊字符，共6到16位`
                                        );
                                    },
                                }
                            ],
                        })(
                            <Input
                                placeholder="密码：example123_(6-16位)"
                                autoComplete="off"
                                size="large"
                                type="password"
                                prefix={<Icon type="lock" />}
                            />
                        )
                    }
                </Form.Item>
                <Form.Item
                    validateStatus={isFieldTouched('captcha') && getFieldError('captcha') ? 'error' : ''}
                    help={isFieldTouched('captcha') && getFieldError('captcha') || ''}
                >
                    <Col span={12}>
                        {
                            getFieldDecorator('captcha', {
                                rules: [
                                    { required: true, whitespace: true, message: '请输入验证码!' },
                                    {
                                        validator: (rule, value, callback) => {
                                            // eslint-disable-next-line
                                            if (this.props.formCheckRules.codeReg.test(value)) {
                                                callback();
                                                return;
                                            }
                                            callback(
                                                `大小写字母、数字，共4位`
                                            );
                                        },
                                    }
                                ],
                            })(
                                <Input
                                    maxLength="4"
                                    placeholder="验证码"
                                    autoComplete="off"
                                    size="large"
                                    prefix={<Icon type="barcode" />}
                                />
                            )
                        }
                    </Col>
                    {/* eslint-disable-next-line */}
                    <Col span={10} offset={2} onClick={this.props.getCaptcha}>
                        <Tooltip title="点击图片刷新">
                            <div className="img-code-container">
                                {/* eslint-disable-next-line */}
                                <img className="img-code" src={this.props.captcha} alt="验证码" />
                            </div>
                        </Tooltip>
                    </Col>
                </Form.Item>
                <Form.Item style={{ textAlign: 'center' }}>
                    <Button type="primary" htmlType="submit" disabled={hasErrors(getFieldsError())}>注册</Button>
                </Form.Item>
            </Form>
        );
    }
}

export default Form.create()(Company);